<template>
    <el-drawer :title="title" v-model="show" size="35%">
        <template #default>
            <el-form ref="formRef" :rules="rules" :model="form" label-width="138px">
                <el-form-item label="小猪店铺号" prop="tenantId">
                    <el-input :disabled="isDisabled" v-model="form.tenantId" placeholder="请输入小猪店铺号"></el-input>
                </el-form-item>
                <el-form-item label="交易商户号" prop="merId">
                    <el-input v-model="form.merId" placeholder="请输入交易商户号"></el-input>
                </el-form-item>
                <el-form-item label="微信二级商户号" prop="subMchId">
                    <el-input v-model="form.subMchId" placeholder="请输入微信二级商户号"></el-input>
                </el-form-item>
                <el-form-item label="交易终端号" prop="terId">
                    <el-input v-model="form.terId" placeholder="请输入交易终端号"></el-input>
                </el-form-item>
                <el-form-item label="私钥密码" prop="paySign">
                    <el-input type="password" v-model="form.paySign" placeholder="请输入私钥密码"></el-input>
                </el-form-item>
                <el-form-item label="上传证书" prop="cerPath">
                    <ZwFileUpload v-model="form.cerPath" :disabled="isDisabled" @change="changeCerPathHandler" />
                </el-form-item>
                <el-form-item label="上传证书解密文件" prop="pfxPath">
                    <ZwFileUpload v-model="form.pfxPath" @change="changePfxPathHandler" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="container-footer">
                <span class="tip">*温馨提示：以上信息需要提前开通宝付支付后进行填写</span>
                <div style="flex: auto">
                    <el-button @click="closeHandler">取消</el-button>
                    <el-button type="primary" @click="submitHandler">确认</el-button>
                </div>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, computed, reactive, inject } from 'vue';
import request from '@/request';
import { isNotEmpty, cloneDeep } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import ZwFileUpload from '@/components/FileUpload.vue';

/** 通信bus */
const bus = inject('bus');

/** 弹框显示隐藏 */
const props = defineProps({
    modelValue: Boolean
});
const emit = defineEmits(['update:modelValue']);
const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

/** form表单 */
const fzForm = {
    tenantId: '',
    merId: '',
    subMchId: '',
    terId: '',
    paySign: '',
    cerPath: '',
    pfxPath: ''
};
let isDisabled = ref(false);
let title = ref('');
const formRef = ref(null);
const form = reactive(cloneDeep(fzForm));
bus.on('payment:edit', row => {
    if (row.hasOwnProperty('id')) {
        Object.assign(form, row);
        title.value = '编辑账号';
    } else {
        Object.assign(form, cloneDeep(fzForm));
        title.value = '新建账号';
    }
});

/**
 * 表单验证
 */
const rules = reactive({
    tenantId: [{ required: true, message: '请输入小猪店铺号', trigger: 'blur' }],
    merId: [{ required: true, message: '请输入交易商户号', trigger: 'blur' }],
    subMchId: [{ required: true, message: '请输入微信二级商户号', trigger: 'blur' }],
    terId: [{ required: true, message: '请输入交易终端号', trigger: 'blur' }],
    paySign: [{ required: true, message: '请输入私钥密码', trigger: 'blur' }],
    cerPath: [{ required: true, message: '请上传证书', trigger: 'blur' }],
    pfxPath: [{ required: true, message: '请上传证书解密文件', trigger: 'blur' }]
});

/**
 * 关闭drawer
 */
const closeHandler = () => {
    show.value = false;
};

/**
 * 上传证书
 * @param {*} url
 */
const changeCerPathHandler = url => {
    form.cerPath = url;
    if (isNotEmpty(url)) {
        formRef.value.validateField('cerPath');
    }
};

/**
 * 上传证书解密文件
 * @param {*} url
 */
const changePfxPathHandler = url => {
    form.pfxPath = url;
    if (isNotEmpty(url)) {
        formRef.value.validateField('pfxPath');
    }
};

/**
 * 提交
 */
const submitHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            await request('savePaymentInfo', form);
            ElMessage.success('操作成功');
            closeHandler();
            bus.emit('payment:query');
        }
    });
};
</script>
<style lang="scss" scoped>
.container-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .tip {
        color: #555;
        font-weight: 500;
        font-size: 12px;
    }
}
</style>
